<template>
    <view>
        <view class="head" v-for="(item,index) in payHistory" :key="index">
            <view class="head1">
                <text style="font-size: 28rpx;
">{{item.equipment_name}}</text>
            </view>
            <view class="head2">
                <text>套餐名称:{{item.setMeal_name}}</text>
                <view class="head2Right">{{item.pay_status_name}}</view>
            </view>
            <view class="head3">
                <text style="margin-right:10rpx">有效时间:{{item.created_at}}</text><text style="margin-left:10rpx">至</text><text style="margin-left:16rpx">{{item.expire_time}}</text>
            </view>
            <view class="head4">
                <text style="width:200rpx">金额:¥{{item.trade_fee}}</text>
                <text style="margin-left:195rpx">用户数量:{{item.user_num}}个</text>
            </view>
        </view>
    </view>
</template>

<script>
import {
    request
} from "@/comon/js/request.js"
export default {
    data() {
        return {
            payHistory: [],
            page: 1,
            maxPag: ""
        }
    },
    onShow() {
        this.getPayHistory()
    },
    onReachBottom() {
        if (this.page < this.maxPage) {
            this.upInit()
        } else {
            return null
        }

    },
    methods: {
        getPayHistory() {
            // uni.showNavigationBarLoading()
            request({
                url: "v1/trade/list",
                methods: "GET",
                data: {
                    page: this.page
                }
            }).then(res => {
                if (res.data.errorcode === 401) {
                    uni.showModal({
                        title: res.data.messages,
                        showCancel: false
                    });
                } else {
                    console.log(res)
                    this.maxPage = res.data.result.list.last_page
                    this.payHistory = res.data.result.list.data
                }
            })
        },
        upInit() {
            this.page++
            request({
                url: "v1/trade/list",
                method: "GET",
                data: {
                    page: this.page
                }
            }).then(res => {
                console.log(res, "::::::::::"),
                    this.payHistory = this.payHistory.concat(res.data.result.list.data)
                // uni.hideNavigationBarLoading()
            })
        },
    }
}
</script>

<style lang="less">
.head {
    background: #f2f8fb;
    height: 255rpx;
    width: 750rpx;
    border-bottom: 1rpx solid #d7d7d7;
    margin-bottom: 15rpx;
    line-height: 60rpx;

    .head1 {
        font-size: 28rpx;
        // margin-bottom: 20rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
    }

    .head2 {
        color: #767472;
        font-size: 28rpx;
        margin-top: 2rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;

        .head2Right {
            text-align: center;
            line-height: 50rpx;
            color: #ffffff;
            width: 120rpx;
            height: 50rpx;
            background: #0c69a4;
            border-radius: 15rpx;
        }
    }

    .head3 {
        color: #767472;
        font-size: 25rpx;
        padding: 0 30rpx;
        // display: flex;
        // justify-content: space-between;
    }

    .head4 {
        display: flex;
        width: 600rpx;
        color: #767472;
        font-size: 28rpx;
        padding: 0 30rpx;
        // justify-content: space-around;
        // display: flex;
        // justify-content: space-between
    }
}
</style>
